import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:pornhub_app/components/easy_toast.dart';

import '../../../assets/styles.dart';
import '../../../services/storage_service.dart';
import '../../../utils/color.dart';

class OpenPasswordPage extends GetView {
  final VoidCallback back;
  OpenPasswordPage({super.key, required this.back});

  final service = Get.find<StorageService>();
  final TextEditingController _textEditingController = TextEditingController();
  final FocusNode _textNode = FocusNode();
  final _resultDataNew = ''.obs;

  @override
  Widget build(BuildContext context) {
    final bgColor = Styles.color.bgColor;

    return Scaffold(
      backgroundColor: bgColor,
      body: _buildBody(context),
    );
  }

  Widget _buildBody(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(top: 200.w),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          SizedBox(height: 10, width: MediaQuery.sizeOf(context).width),
          Text(
            '输入密码',
            style: TextStyle(
              fontSize: 16.w,
              fontWeight: FontWeight.w600,
            ),
          ),
          const SizedBox(height: 8),
          Offstage(
            offstage: true,
            child: TextField(
              controller: _textEditingController,
              focusNode: _textNode,
              keyboardType: TextInputType.number,
              inputFormatters: <TextInputFormatter>[
                LengthLimitingTextInputFormatter(6),
                FilteringTextInputFormatter.digitsOnly
              ],
              onChanged: (value) {
                _resultDataNew.value = value;
                if (value.length == 6) {
                  _textEditingController.clear();
                  if (_resultDataNew.value == service.lockPassword) {
                    back();
                  } else {
                    _resultDataNew.value = '';
                    EasyToast.show('密码错误');
                  }
                }
              },
            ),
          ),
          const SizedBox(height: 10),
          GestureDetector(
            behavior: HitTestBehavior.opaque,
            onTap: () {
              _textNode.requestFocus();
            },
            child: Obx(() {
              return _buildNumberWidget(_resultDataNew.value.length);
            }),
          ),
        ],
      ),
    );
  }

  Widget _buildNumberWidget(int length) {
    return Container(
      height: 28.w,
      width: double.infinity,
      alignment: Alignment.center,
      child: ListView.builder(
        shrinkWrap: true,
        padding: EdgeInsets.zero,
        scrollDirection: Axis.horizontal,
        physics: const NeverScrollableScrollPhysics(),
        itemCount: 6,
        itemExtent: 47,
        itemBuilder: (BuildContext context, int index) {
          bool showPoint = index < length;
          return _buildNumberItemWidget(index, showPoint);
        },
      ),
    );
  }

  Widget _buildNumberItemWidget(int index, bool showPoint) {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 5.w),
      width: 42.w,
      height: 28.w,
      alignment: Alignment.center,
      decoration: BoxDecoration(
        color: COLOR.hexColor('#DFDFDF'),
        borderRadius: BorderRadius.circular(6.0),
      ),
      child: showPoint
          ? Container(
              height: 10,
              width: 10,
              decoration: BoxDecoration(
                color: Colors.black,
                borderRadius: BorderRadius.circular(6),
              ),
            )
          : Container(),
    );
  }
}
